import { Button, Form, Input, Modal, Radio, message } from 'antd';
import React, { createRef, useState, useEffect } from 'react';
import url from '../../../../config/url';
import req from '../../../../http/req'
const Xiugai = (props) => {
  const [isModalVisible, setIsModalVisible] = useState(false);
  const formRef = createRef();

  const showModal = () => {
    setIsModalVisible(true);
    // console.log(formRef)
    // console.log(props.fn());
    formRef.current.setFieldsValue({
      id:props.fn().id,
      username: props.fn().username,
      mobile: props.fn().mobile,
      password: props.fn().password,
      email: props.fn().email,
      gender: props.fn().gender,
    })
  };
  const handleOk = () => {
    setIsModalVisible(false);
  };

  const handleCancel = () => {
    setIsModalVisible(false);
  };
  const onFinish = (values)=>{
    // console.log(values)
    req.put(url.Deletedel+`/${values.id}`,{
      username: values.username,
      mobile: values.mobile,
      password: values.password,
      email: values.email,
      gender: values.gender,
    }).then((res)=>{
      // console.log(res)
      if(res.data.errNo===0){
        // 刷新页面
        window.location.reload()
        message.success('修改成功');
      }else{
        message.warning('修改失败');
      }

    })
  }

  return (
    <>
      <Button type="primary" onClick={showModal}>
        修改
      </Button>
      <Modal footer={null} title="修改数据" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel} forceRender={true}
      >
        <Form
          ref={formRef}
          onFinish={onFinish}
          name="form_in_modal"
        >
          <Form.Item
            name="id"
            label="id"
          >
            <Input />
          </Form.Item>
          <Form.Item
            name="username"
            label="大棚名称"
          >
            <Input />
          </Form.Item>
          
          <Form.Item
            name="mobile"
            label="手机号"
          >
            <Input />
          </Form.Item>
          <Form.Item

            name="password"
            label="密码"
          >
            <Input type={'password'} />
          </Form.Item>
          <Form.Item
            name="email"
            label="邮箱"
          >
            <Input />
          </Form.Item>
          <Form.Item name="gender" className="collection-create-form_last-form-item">
            <Radio.Group>
              <Radio value="1">20%</Radio>
              <Radio value="2">30%</Radio>
              <Radio value="3">40%</Radio>
            </Radio.Group>
          </Form.Item>
          <Form.Item>
                    {/* block：让当前元素的宽度与父元素宽度一致，当然手写样式也可以 */}
                    <Button
                        type="primary"
                        htmlType="submit"
                        size="large"
                        // block
                    >
                        确认修改
                    </Button>
                </Form.Item>
        </Form>
        
      </Modal>
    </>
  );
};

export default Xiugai;